<template>
	<view class="mine_container">
		<view class="mine" v-if="userInfo.companyPhone">
			<view :style="{backgroundImage: 'url('+imageURL+')'}" class="top">
				<view class="left" @click="loginClick()">
					<image :src="userInfo.wxImg" mode="widthFix" v-if="userInfo.wxImg"></image>
					<image src="http://applet.atptest.com/c9WsCBqw1719467091124.jpg?v=1719467091295" mode="widthFix"
						v-else>
					</image>
					<view class="username_container">
						<view class="username">
							{{userInfo.wxName || "立即登录"}}
						</view>
						<view class="phone">
							{{filterPhone(userInfo.companyPhone) }}
						</view>
					</view>
				</view>
				<view class="right">
					<view v-if="headUserId">
						<u-button text="充值" @click="toTopUp()"></u-button>
					</view>
				</view>
			</view>

			<u-notice-bar :text="notice"></u-notice-bar>

			<view class="nav">
				<view class="left" @click="swichClick(1)">
					<view style="font-size: 32rpx;">{{userInfo.companyLable!==null?userInfo.balance:0}}</view>
					<view style="font-size: 24rpx;color: rgb(104, 104, 106);">余额</view>
				</view>
				<view class="right" @click="swichClick(0)">
					<view style="font-size: 32rpx;">{{userInfo.couponCount}}</view>
					<view style="font-size: 24rpx;color: rgb(104, 104, 106);">优惠券</view>
				</view>
			</view>

			<view style="background-color: #fff;margin-top: 10rpx;">
				<view
					style="margin-left: 16px;padding-left: 10px;margin-top: 20px;font-size: 18px;line-height: 18px; border-left: 5px solid #3953b8;">
					商品订单</view>
			</view>
			<view class="button">
				<view v-for="(item,index) in btn" :key="index" @click="btnClick(item.i)">
					<image :src="item.img" mode="widthFix" class="img"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view style="background-color: #fff;">
				<view
					style="margin-left: 16px;padding-left: 10px;margin-top: 20px;font-size: 18px;line-height: 18px; border-left: 5px solid #3953b8;">
					更多服务
				</view>
			</view>
			<view v-if="check" class="service">
				<view v-if="index !== 0 || index == 0 && num == 1" v-for="(item,index) in serviceBtn" :key="index"
					@click="serviceClick(item,index)" class="box">
					<view style="display: flex;align-items: center;">
						<image :src="item.img" mode="widthFix" class="img"></image>
						<view style="margin-left: 10rpx;">{{item.name}}</view>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="not_login" v-else>
			<view class="login_btn" @click="loginClick()">
				立即登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		GetOpenid,
		GetUserState,
		GetUserInfo,
		GetBroadcastOpen
	} from '../../api/user.js'
	export default {
		name: "userInfo",
		data() {
			return {
				num: 1,
				code: null,
				openId: '',
				agentId: "",
				headUserId: null,
				btn: [{
						name: "待付款",
						i: 2,
						img: require('../../static/img/mine/1.png')
					},
					{
						name: "待验货",
						i: 3,
						img: require('../../static/img/mine/2.png')
					},
					{
						name: "已完成",
						i: 1,
						img: require('../../static/img/mine/4.png')
					},
					{
						name: "退款",
						i: 4,
						img: require('../../static/img/mine/11.png')
					},
					{
						name: "全部",
						i: 99,
						img: require('../../static/img/mine/5.png')
					}
				],
				serviceBtn: [],
				check: true,
				imageURL: "http://applet.atptest.com/23042304.jpg",
				notice: '',
				isShare: false
			};
		},
		computed: {
			...mapState('user', ['userInfo']) // vuex
		},
		onShow() {
			this.getUserInfo()
			// this.checkShow()
			// this.getUserState()
			// this.getOpenId()
			this._GetBroadcastOpen()
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),

			btnClick(i) {
				uni.navigateTo({
					url: `/pagesB/pages/order/order?i=${i}`
				})
			},
			loginClick() {
				uni.navigateTo({
					url: '/pagesB/pages/mineInfo/mineInfo'
				})
			},
			serviceClick(item, i) {
				if (item.name === "设置") {
					uni.navigateTo({
						url: '/pagesB/pages/mineInfo/mineInfo'
					})
				}
				if (item.name == "后台管理") {
					uni.navigateTo({
						url: '/pagesA/pages/admin/admin'
					})
				}
				if (item.name == "二维码") {
					uni.navigateTo({
						url: '/pagesA/pages/qrcode/qrcode?agentId=' + this.agentId
					})
				}
				if (item.name == "地址管理") {
					uni.navigateTo({
						url: '/pagesA/pages/address/address'
					})
				}
				if (item.name == "开票记录") {
					uni.navigateTo({
						url: '/pagesA/pages/ticketRecord/ticketRecord'
					})
				}
				if (item.name == "发票模板") {
					uni.navigateTo({
						url: '/pagesA/pages/invoiceTemplate/invoiceTemplate'
					})
				}
				if (item.name == "已报活动") {
					uni.navigateTo({
						url: '/pagesB/pages/signProject/signLogs'
					})
				}
				if (item.name == "分销管理") {
					uni.navigateTo({
						url: '/pagesA/pages/distribution/distribution?agentId=' + this.agentId
					})
				}
				if (item.name == "分销提现") {
					uni.navigateTo({
						url: '/pagesA/pages/withdraw/withdraw?agentId=' + this.agentId
					})
				}
				if (item.name == "分销商申请") {
					if (!this.userInfo.companyPhone) {
						uni.navigateTo({
							url: '/pagesB/pages/mineInfo/mineInfo'
						})
					} else {
						uni.navigateTo({
							url: '/pagesB/pages/distributorApply/distributorApply'
						})
					}
				}
				if (item.name == "支付记录") {
					uni.navigateTo({
						url: '/pagesA/pages/paymentRecord/paymentRecord'
					})
				}
				if (item.name == "优惠活动") {
					uni.navigateTo({
						url: '/pagesA/pages/coupon/coupon'
					})
				}
				if (item.name == "会议室预约") {
					uni.navigateTo({
						url: '/pagesA/pages/meeting/meeting'
					})
				}
				if (item.name == "公司订单") {
					uni.navigateTo({
						url: '/pagesA/pages/companyOrder/companyOrder?headUserId=' + this.headUserId
					})
				}
			},
			toSetting() {
				if (!this.check) {
					return
				} else {
					uni.navigateTo({
						url: '/pagesB/pages/mineInfo/mineInfo'
					})
				}
			},
			// 获取用户状态（是否可进入后台）
			getUserState() {
				GetUserState().then((res) => {
					if (res) {
						this.serviceBtn = [{
								name: "后台管理",
								img: require('../../static/img/mine/10.png')
							},
							{
								name: "优惠活动",
								img: require('../../static/img/mine/youhui.png')
							},
							{
								name: "已报活动",
								img: require('../../static/img/mine/sign.png')
							},
							{
								name: "会议室预约",
								img: require('../../static/img/mine/meeting.png')
							},
							{
								name: "发票模板",
								img: require('../../static/img/mine/invoice.png')
							},
							{
								name: "开票记录",
								img: require('../../static/img/mine/invoiceRecord.png')
							},
							{
								name: "支付记录",
								img: require('../../static/img/mine/payRecord.png')
							},
							{
								name: "地址管理",
								img: require('../../static/img/mine/address.png')
							},
							{
								name: "设置",
								img: require('../../static/img/mine/setting.png')
							},
						]
					} else {
						this.serviceBtn = [{
								name: "优惠活动",
								img: require('../../static/img/mine/youhui.png')
							},
							{
								name: "已报活动",
								img: require('../../static/img/mine/sign.png')
							},
							{
								name: "会议室预约",
								img: require('../../static/img/mine/meeting.png')
							},
							{
								name: "发票模板",
								img: require('../../static/img/mine/invoice.png')
							},
							{
								name: "开票记录",
								img: require('../../static/img/mine/invoiceRecord.png')
							},
							{
								name: "支付记录",
								img: require('../../static/img/mine/payRecord.png')
							},
							{
								name: "地址管理",
								img: require('../../static/img/mine/address.png')
							},
							{
								name: "设置",
								img: require('../../static/img/mine/setting.png')
							}
						]
					}
					if (this.agentId) {
						if (this.headUserId) {
							this.serviceBtn.splice(3, 0, {
								name: "分销管理",
								img: require('../../static/img/mine/distribution.png')
							})
							this.serviceBtn.splice(4, 0, {
								name: "分销提现",
								img: require('../../static/img/mine/withdraw.png')
							})
						}
					} else {
						if (!this.userInfo.isFans) {
							this.serviceBtn.splice(3, 0, {
								name: "分销商申请",
								img: require('../../static/img/mine/distributionApply.png')
							})
						}
					}
					if (this.isShare) {
						this.serviceBtn.splice(1, 0, {
							name: "二维码",
							img: require('../../static/img/mine/code.png')
						})
					}
					if (this.headUserId) {
						this.serviceBtn.splice(7, 0, {
							name: "公司订单",
							img: require('../../static/img/mine/company-order.png')
						})
					}
				})
			},

			// 获取用户信息
			getUserInfo() {
				GetUserInfo().then((res) => {
					this.agentId = res.agentId;
					this.headUserId = res.headUserId;
					this.isShare = res.isShare;
					this.setUserInfo(res)
					this.getUserState()
				})
			},

			// check功能
			checkShow() {
				const _that = this
				uni.request({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/GetWeChatOpen',
					method: 'GET',
					success(res) {
						if (res.data.code == 200) {
							_that.check = res.data.data
						}
					}
				})
			},
			toTopUp() {
				uni.navigateTo({
					url: "/pagesB/pages/topUp/topUp"
				})
			},
			// 获取广播
			async _GetBroadcastOpen() {
				const res = await GetBroadcastOpen()
				if (res.code == 400) {
					this.notice = ''
				} else {
					this.notice = res
				}
			},
			swichClick(i) {
				uni.navigateTo({
					url: `/pagesB/pages/memberCenter/memberCenter?state=${i}`
				})
			},
			//手机号过滤处理
			filterPhone(val) {
				if (val) {
					return val.substr(0, 3) + '****' + val.substr(7, val.split('').length);
				} else {
					return "";
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.mine_container {
		width: 100%;
		height: 100vh;
	}

	.not_login {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;

		.login_btn {
			width: 200rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			align-items: center;
			background: linear-gradient(to right, #0081ff, #1cbbb4);
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.mine {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx;
			height: 240rpx;
			background-size: 100%;
			color: #fff;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.username_container {
					.username {
						font-size: 36rpx;
						font-weight: 600;
					}

					.phone {
						font-size: 24rpx;
						margin-top: 5rpx;
					}
				}

			}
		}

		.nav {
			display: flex;
			align-items: center;
			height: 130rpx;
			background: rgb(255, 255, 255);
			box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);

			.left {
				width: 50%;
				text-align: center;
				border-right: 1px solid rgb(230, 230, 230);
			}

			.right {
				width: 50%;
				text-align: center;
			}
		}

		.button {
			display: flex;
			justify-content: space-around;
			text-align: center;
			padding-top: 20rpx;
			font-size: 14px;
			background-color: #ffffff;

			.img {
				width: 80rpx;
			}
		}

		.service {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;
			padding-left: 20rpx;
			padding-bottom: 10rpx;
			font-size: 14px;
			background-color: #ffffff;

			.box {
				display: flex;
				justify-content: space-between;
				padding-right: 20px;
				align-items: center;
				height: 100rpx;

				.img {
					width: 55rpx;
				}
			}
		}
	}

	/deep/ .u-button--info {
		color: #fff !important;
		background-color: #4058bb !important;
		border-color: #4058bb !important;
	}

	/deep/ .u-button {
		height: 50rpx !important;
	}

	/deep/ .u-button--normal {
		padding: 2rpx 24rpx !important;
	}

	/deep/ .u-button--square {
		border-bottom-left-radius: 25rpx !important;
		border-bottom-right-radius: 25rpx !important;
		border-top-left-radius: 25rpx !important;
		border-top-right-radius: 25rpx !important;
	}
</style>